<%--
  Created by IntelliJ IDEA.
  User: 16219
  Date: 2022/4/28
  Time: 22:08
  To change this template use File | Settings | File Templates.
--%>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" +
            request.getServerPort() + request.getContextPath() + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="<%=basePath%>">
    <%
        String username = (String) session.getAttribute("username");
    %>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #left ul li{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: white;
        }
        .dynamic{
            width: 850px;
            height: 500px;
            background: white;
        }
        .shang{
            height: 20px;
            width: 850px;
        }
        .neirong{
            margin-top: 30px;
            margin-left: 30px;
            width: 500px;
            height: 400px;
            background-color: #dfdfdf;
            border-radius: 10px;
        }
        .foodTable{
            width: 350px;
            height: 300px;
            margin-left: 80px;
        }
        .btn{
            color: white;
            outline: none;
            border: 0;
            background-color: rgb(255,129,64);
            width: 80px;height: 40px;
            margin-right: 10px;
            margin-top: 8px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript" src="jQuery/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        function subOrder(){
            const foodName = document.getElementById("foodName").value;
            if (foodName === "") {
                alert("餐品名称不能为空")
                return;
            }
            const foodPrice = document.getElementById("price").value;
            if (foodPrice === "") {
                alert("餐品价格不能为空")
            }
            const foodCount = document.getElementById("count").value;
            if (foodCount === "") {
                alert("餐品数量不能为空")
            } else if (foodCount.indexOf(".") !== -1) {
                alert("餐品数量必须为整数")
            }
            const foodPicture = document.getElementById("file").value;
            const strArr = ["jpeg","JPEG","jpg","JPG","png","PNG"];
            if (foodPicture === "") {
                alert("未选择餐品图片")
                return;
            } else if (!strContainsStr(foodPicture,strArr)) {
                alert("仅支持jpeg/jpg/png格式图片文件")
                return;
            }
            const formData = new FormData();
            formData.append("file",document.getElementById("file").files[0]);
            $.ajax({
                url:"provide/provideFood.do?username=<%=username%>&foodName="+foodName+"&price="+foodPrice+"&count="+foodCount,
                type:"post",
                cache : false,
                contentType : false,
                data : formData,
                processData : false,
                success:function(response){
                    if (response.code == 0) alert("餐品创建成功");
                    else alert(response.message);
                }
            })

        }
        function strContainsStr(str,strArr){
            for (let i = 0; i < strArr.length; i++) {
                if (str.indexOf(strArr[i]) !== -1)
                    return true;
            }
            return false;
        }
    </script>
</head>
<body>
<center id="one">
    <div class="dynamic">
        <div class="shang">
        </div>
        <div class="neirong">
            <table class="foodTable">
                <tr>
                    <td style="width: 150px;height: 50px"></td>
                    <td style="width: 200px;height: 50px"></td>
                </tr>
                <tr align="center">
                    <td style="width: 150px;height: 50px">餐品名称:</td>
                    <td style="width: 200px;height: 50px" align="left">
                        <input type="text" id="foodName" name="foodName" />
                    </td>
                </tr>
                <tr align="center">
                    <td style="width: 150px;height: 50px">餐品价格:</td>
                    <td style="width: 200px;height: 50px" align="left">
                        <input type="number" id="price" name="price" />
                    </td>
                </tr>
                <tr align="center">
                    <td style="width: 150px;height: 50px">餐品数量:</td>
                    <td style="width: 200px;height: 50px" align="left">
                        <input type="number" id="count" name="count" />
                    </td>
                </tr>
                <tr align="center">
                    <td style="width: 150px;height: 50px">餐品图片:</td>
                    <td style="width: 200px;height: 50px">
                        <input type="file" id="file" name="file" />
                    </td>
                </tr>
                <tr align="center">
                    <td colspan="2" style="width: 350px;height: 50px">
                        <input type="button" value="新增餐品" class="btn" onclick="subOrder()" style="margin-left: -50px"/>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</center>
</body>
</html>
